<template>
  <header
    class="w-full left-0 top-0 text-white shadow-lg header z-10 md:hidden"
  >
    <div class="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between">
      <!-- Logo 或应用名称 -->
      <a href="#" class="text-xl font-semibold cursor-pointer">LYC</a>
      <!-- 移动端导航菜单按钮 -->
      <button
        class="block md:hidden focus:outline-none"
        @click="toggleMobileMenu"
      >
        <i class="fas fa-bars text-lg"></i>
      </button>
    </div>

    <!-- 移动端菜单 -->
    <div
      v-show="showMobileMenu"
      class="absolute animate__animated animate__fadeInDown duration-200 top-10 left-0 right-0 header z-10"
    >
      <ul class="flex flex-col text-center">
        <li
          class="py-1 cursor-pointer text-lg hover:text-blue-400"
          :class="{ active: isActive('/home') }"
          @click="changeComponentByRoute('/home')"
        >
          <a class="flex items-center justify-center space-x-2">
            <i class="fas fa-home"></i>
            <span>首页</span>
          </a>
        </li>

        <!-- 动态生成的菜单项 -->
        <li
          v-for="item in headerData"
          :key="item.icon"
          class="py-[8px] cursor-pointer text-lg hover:text-blue-400"
          :class="{ active: item.isActive }"
          @click="changeComponent(item.component, item)"
        >
          <a class="flex items-center justify-center space-x-2">
            <i :class="item.icon"></i>
            <span>{{ item.text }}</span>
          </a>
        </li>
      </ul>
    </div>
  </header>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  headerData: {
    type: Array,
    required: true,
    default: () => []
  },
  activeRoute: {
    type: String,
    required: true,
    default: ''
  }
})

const emit = defineEmits(['changeComponentByRoute', 'changeComponent'])

// 移动端菜单显示控制
const showMobileMenu = ref(false)

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

// 判断当前路径是否是激活的路径
const isActive = (route) => props.activeRoute === route

// 切换路由
const changeComponentByRoute = (route) => {
  emit('changeComponentByRoute', route)
}

// 切换组件
const changeComponent = (component, item) => {
  showMobileMenu.value = !showMobileMenu.value
  emit('changeComponent', component, item)
}
</script>

<style scoped>
.header {
  background-color: rgba(46, 54, 71, 0.8); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 模糊效果 */
  z-index: 10;
}
.active {
  color: #1d4ed8; /* 高亮色（蓝色） */
  font-weight: bold; /* 加粗 */
}

/* 移动端菜单样式 */
@media (max-width: 767px) {
  .header {
    position: fixed;
  }

  .absolute.top-0.left-0.right-0.bg-gray-800.bg-opacity-90 {
    display: block;
  }

  /* 汉堡菜单按钮 */
  .block.md:hidden {
    display: block;
  }

  .absolute.top-0.left-0.right-0.bg-gray-800.bg-opacity-90 ul {
    padding: 1rem;
  }
}
</style>
